<template>
  <div id="page-advertising">
    <!-- style -->
    <div v-html="css"></div>

    <div class="advertising-preview" :class=className>
      <!--<p>{{selected_vdc.config.datas}}</p>-->
      <!-- 主要布局，中间，最小宽度 375x667 -->
      <div class="main-layout is-app">
        <!-- 底部导航布局 -->
        <div class="weixin-preview">
          <div style="background:#fff;">
            <template v-if="datas.show_search.value">
              <div class="weixin-title"
                   v-if="datas.logo_style.value == 1">
                <div class="weixin-logo-one" v-if="datas.show_logo.value">
                  <img :src="datas.logo.value || emptyImage">
                </div>
                <div class="weixin-sousuo"
                     :class="{ 'w': datas.choose_search_style.value==3,
                     'center': datas.choose_search_style.value==2,
                     'padding':datas.choose_search_style.value==3  }">
                  <i class="iconfont icon-all_search_2"
                     v-if="datas.choose_search_style.value==1||datas.choose_search_style.value==2"></i>
                  <div>{{datas.search_title.value}}</div>
                </div>
                <span v-if="datas.choose_search_style.value==3"
                      :class="{ 'borderOne': datas.choose_search_style.value==3}"
                      class="block">搜索</span>
              </div>
              <div class="weixin-title"
                   v-else>
              <span v-if="datas.choose_search_style.value==3"
                    :class="{ 'borderTwo': datas.choose_search_style.value==3}"
                    class="block">搜索</span>
                <div class="weixin-sousuo"
                     :class="{ 'w': datas.choose_search_style.value==3,
                     'center': datas.choose_search_style.value==2,
                     'padding':datas.choose_search_style.value==3 }">
                  <i class="iconfont icon-all_search_2"
                     v-if="datas.choose_search_style.value==1||datas.choose_search_style.value==2"></i>
                  <div>{{datas.search_title.value}}</div>
                </div>
                <div class="weixin-logo-two" v-if="datas.show_logo.value">
                  <img :src="datas.logo.value || emptyImage">
                </div>
              </div>
            </template>

            <div class="weixin-bd">
              <ul class="weixin-menu" :style="{fontWeight: datas.title_style.value.includes('1')?'bold':'',
                                               fontStyle: datas.title_style.value.includes('2')?'italic':''}"
                  id="weixin-menu"
                  :class="{ 'scroll': true }">
                <li v-for="(btn, i) in datas.title_list.value"
                    class="menu-item"
                    @click="selectedMenu(i)">
                  <div class="menu-item-title" :class="{
                      'current': selectedMenuIndex==i,
                    }">
                    <img v-if="datas.choose_style.value == '2'" :src="btn.image || emptyImage">
                    <span>{{ btn.text}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <a-button type="primary" class="fix-class" @click="handle_save">保存</a-button>
    </div>

    <!-- 组件表单 -->
    <layout-form :selected_vdc="selected_vdc"/>
  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
	import layoutForm from "../../system-components/layout-form/index.vue"; // 组件表单区域

	const css = function () {
		const {
			title_height,
			title_size,
			choose_title_color,
			title_bg_color,
			title_color,
			navigate_color
		} = this.selected_vdc.config.datas;

		const {
			preview_color,
			search_color,
			font_color,
			search_height,
			border_style,
			border_color,
			search_border_radius,
			border_radius,
		} = this.selected_vdc.config.datas;

		return `
		    .component-${this.selected_vdc.id} .weixin-title{
            height: ${search_height.value}px;
            background-color: ${preview_color.value || '#ffffff'};
	      }

	      .component-${this.selected_vdc.id} .weixin-sousuo {
	          background-color: ${search_color.value};
	          color: ${font_color.value};
	          border-radius: ${search_border_radius.value}px;
            border: solid  ${border_style.value}px ${border_color.value};
	      }
	      .component-${this.selected_vdc.id} .weixin-logo-one img, .component-${this.selected_vdc.id} .weixin-logo-two img{
	          border-radius: ${border_radius.value}px;
	      }

        .component-${this.selected_vdc.id} .weixin-preview .weixin-menu{
            height: ${title_height.value+2}px;
            font-size: ${title_size.value}px;
            color: ${title_color.value || '#333333'};
            background-color: ${navigate_color.value || '#ffffff'};
        }
        .component-${this.selected_vdc.id} .weixin-preview .weixin-menu .menu-item {
            height: ${title_height.value}px;
            line-height: ${title_height.value}px;
        }
        .component-${this.selected_vdc.id} .weixin-preview .weixin-menu .current{
            color: ${choose_title_color.value || '#333333'};
            background-color: ${title_bg_color.value || '#ffffff'};
        }

    `;
	};

	export default {
		data() {
			return {
				id: '',
				page_sort: '1',
				selectedMenuIndex: 0,
				emptyImage,
				selected_vdc: {
					id: 'M' + new Date().getTime(),
					component_key: "U000251",
					component_title: "顶部菜单设置",
					template_id: 3,
					template_name: "template1",
					template_title: "模版一",
					template_list: [
						{
							id: 3,
							name_en: "template1",
							name: "模版一",
							component_key: "U000251"
						}
					],
					config: {
						datas: {
							group_title: {title: "菜单名称", type: "text", value: ""},
							// preview_color: {
							// 	title: "搜索栏背景色",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							preview_color: {
								title: '搜索栏背景色',
								type: 'color',
								value: "#ffffff",
							},
							font_color: {
								title: '文字颜色',
								type: 'color',
								value: '#666666',
							},
							search_color: {
								title: "搜索框底色",
								type: "color",
								value: "#f3f2f2"
							},
							scroll_hide_search: {
								title: "上滑时搜索栏是否隐藏",
								type: "switch",
								value: true
							},
							show_search: {
								title: "搜索栏是否显示",
								type: "switch",
								value: true
							},
							choose_search_style: {
								title: "搜索框样式",
								type: "radio",
								value: "1",
								options: [
									{label: "样式一", value: "1"},
									{label: "样式二", value: "2"},
									{label: "样式三", value: "3"}
								]
							},
							search_border_radius: {
								title: "搜索框圆角",
								type: "bar",
								value: 0,
								min: 0,
								max: 16,
							},
							search_title: {title: "搜索框提示文字", type: "text", value: "店内搜索"},
							search_height: {
								title: "搜索栏高度",
								type: "bar",
								value: 50,
								min: 40,
								max: 70,
							},
							border_style: {
								title: "搜索框边框是否显示",
								type: "radio",
								value: "0",
								options: [
									{label: "是", value: "1"},
									{label: "否", value: "0"},
								]
							},
							border_color: {
								title: "边框颜色",
								type: "color",
								value: "#333333"
							},
							show_logo: {
								title: "logo是否显示",
								type: "switch",
								value: true,
							},
							logo_style: {
								title: "logo样式",
								type: "radio",
								value: "1",
								options: [
									{label: "左边", value: "1"},
									{label: "右边", value: "2"},
								]
							},
							logo: {
								title: "logo图片",
								type: "image",
								value: ""
							},
							border_radius: {
								title: "logo圆角",
								type: "bar",
								value: 0,
								min: 0,
								max: 16,
							},
							notice_link: {
								title: "自定义跳转链接",
								type: "link",
								value: {is_h5: '1', link: '',gh_id: '',minApp_link:'',app_link:''},
							},
							title_style: {
								title: "文字样式",
								type: "textstylebox",
								value: [],
							},
							// navigate_color: {
							// 	title: "菜单栏背景色",
							// 	type: "bg",
							// 	value: {
							// 		isColor: '1',
							// 		color: "#ffffff",
							// 		image: ""
							// 	}
							// },
							navigate_color: {
								title: '菜单栏背景色',
								type: 'color',
								value: "#ffffff",
							},
							title_color: {
								title: "菜单栏文字颜色",
								type: "color",
								value: "#333333"
							},
							choose_title_color: {
								title: "菜单选中文字颜色",
								type: "color",
								value: "#ffffff"
							},
							title_bg_color: {
								title: "菜单选中背景颜色",
								type: "color",
								value: "#333333"
							},
							title_size: {
								title: "菜单字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 24,
							},
							title_height: {
								title: "菜单栏高度",
								type: "bar",
								value: 40,
								min: 30,
								max: 60,
							},
							title_list: {
								title: '导航设置',
								type: "list",
                tips: '左边滚动条只会在PC端出现',
								choose_title: {
									choose_option: [
										{label: "普通样式", value: "1"},
										{label: "图标+文字", value: "2"},
									]
								},
								value: [
									{
										id: 1,
										image: '',
										is_minApp: '1',
										h5_link: '',
										gh_id: '',
										minApp_link: '',
										text: '文本'
									}
								]
							},
							choose_style: {
								title: '选择方式',
								type: 'radio',
								value: '1',
								options: []
							},
						},
						styles: {},
						layout: [
							{
								datas: [
									{
										title: "搜索栏配置",
										groups: ["group_title", "preview_color", "font_color", "search_color", "show_search",
											"choose_search_style", "search_border_radius", "search_title",
											"scroll_hide_search", "search_height",
											"border_style", "border_color", "show_logo",
											"logo_style", "logo", "border_radius","notice_link"]
									},
									{
										title: "菜单栏配置",
										groups: [
											"title_style",
											"navigate_color",
											"title_color",
											"choose_title_color",
											"title_bg_color",
											"title_size",
											"title_height",
											"title_list",
										]
									}
								],
								styles: []
							}
						]
					},
					is_loaded_config: true,
					remote_data: {},
					remote_style: {}
				}
			};
		},

		computed: {
			datas() {
				return this.selected_vdc.config.datas;
			},
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.selected_vdc.id}`];
				return name;
			},
		},
		components: {
			layoutForm
		},
    created() {
			this.id = this.$route.query.id;
	    this.page_sort = this.fun.getKey('page_sort');
			if(this.id) {
				this.getData();
      }
    },

		methods: {
			/**
			 * 获取顶部菜单栏详情
			 * @param {string} top_id 菜单ID
			 */
			getData() {
				$http.post("plugin.decorate.admin.decorate-top.get-info", { top_id: this.id }, "loading").then(response => {
					if (response.result === 1) {
						this.selected_vdc.config.datas = JSON.parse(response.data.page_info);
						this.selected_vdc.config.datas.group_title.value = response.data.name;
					} else {
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			handle_save() {
				let that = this;
				let pageinfo = this.handle_data(this.datas);
				if(!pageinfo.group_title) {
					this.$message.error('菜单名称不能为空');
					return
				}
				let json = {
					id: this.id,
					name: pageinfo.group_title,
					top_type: this.page_sort,
					page_info: JSON.stringify(this.datas),
				};
				// console.log(json,"json");
				$http.post("plugin.decorate.admin.decorate-top.save", json, "loading").then(response => {
					if (response.result === 1) {
						this.$success({
							title: '提示',
							content: '保存成功',
							onOk: function () {
								that.$router.push(that.fun.getUrl("/top_navigation_list"));
							}
						});
					} else {
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			/**
			 * 处理数据
			 * @param {String} datas
			 * **/
			handle_data(datas) {
				let handleDatas = {};
				Object.keys(datas).map(key => {
					handleDatas[key] = datas[key].value;
				});
				return handleDatas;
			},
			//添加菜单
			addMenu(level) {
				this.menu.button.push({
					type: "view",
					name: "菜单",
					url: "",
					material: {type: ""}
				});
				this.selectedMenuIndex = this.menu.button.length - 1;
			},
			deleteMenu(parent_index, item, index) {
				this.menu.button.splice(index, 1);
			},
			//选中主菜单
			selectedMenu(i, event) {
				this.selectedMenuIndex = i;
			},
			// rem转换
			// px2rem(val = 0) {
			// 	return (val / 75) + 'rem';
			// }
		}
	};
</script>

<style lang="less" scoped>
  .advertising-preview {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding-top: 114px;
    padding-bottom: 100px;
    overflow-y: scroll;
    // 主要预览布局
    .main-layout {
      position: relative;
      margin: 0 45% 0 auto;
      width: 375px;
      min-height: 667px;
      background: #fff;
      box-shadow: -10px 20px 30px 0px rgba(192, 197, 205, 0.8);
      .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #e7e7e7;
      }
      // 为空
      &.is-empty {
        .is-empty {
          display: block;
        }
      }
      // 空数据的样式
      .is-empty {
        position: absolute;
        left: 0px;
        top: 270px;
        right: 0px;
        display: none;
        text-align: center;
        color: #c7dcff;
        font-size: 14px;
        img {
          margin: 0 auto;
          display: block;
        }
      }
    }
  }

  * {
    box-sizing: border-box;
  }

  ul {
    padding: 0;
  }

  li {
    list-style: none;
  }

  #app-menu {
    overflow: hidden;
    width: 950px;
  }

  .weixin-preview {
    position: relative;
    display: inline-block;
    width: 375px;
    min-height: 667px;
    float: left;
    margin-right: 10px;
    border: 1px solid #e7e7eb;
  }

  .weixin-preview a {
    text-decoration: none;
    color: #616161;
  }

  .weixin-preview .weixin-hd {
    color: #fff;
    text-align: center;
    position: relative;
    top: 0px;
    left: 0px;
    width: 320px;
    height: 64px;
    background-position: 0 0;
  }

  .weixin-preview .weixin-bd {
    /*修改滚动条样式*/
    ul::-webkit-scrollbar{
      width:8px;
      height:8px;
      /**/
    }
    ul::-webkit-scrollbar-track{
      background: rgb(239, 239, 239);
      border-radius:2px;
    }
    ul::-webkit-scrollbar-thumb{
      background: #bfbfbf;
      border-radius:10px;
    }
    ul::-webkit-scrollbar-thumb:hover{
      background: #29ba9c;
    }
    ul::-webkit-scrollbar-corner{
      background: rgb(239, 239, 239);
    }
  }

  .weixin-preview .weixin-menu {
    // background: transparent url({{ plugin_assets('wechat', 'assets/images/menu_foot.png') }}) no-repeat 0 0;
    /*background-position: 0 0;*/
    /*background-repeat: no-repeat;*/
    // padding-left: 43px;
    /*margin-bottom: 0px;*/
    /*height: 40px;*/
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
  }

  /*一级*/
  .weixin-preview .weixin-menu .menu-item {
    flex: 1;
    position: relative;
    line-height: 36px;
    height: 36px;
    text-align: center;
    /*min-width: 20%;*/
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    .menu-item-title {
      padding: 0 10px;
      /*white-space: nowrap;*/
      /*text-overflow: ellipsis;*/
      /*overflow: hidden;*/
      /*word-break: break-all;*/
      text-align: center;
      img {
        width: 20px;
        height: 20px;
        align-self: center;
        display: inline-block;
      }
      span {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  .weixin-preview .weixin-menu .menu-item:first-child {
    /*border-left-width:0px;*/
  }

  .menu-item-delete {
    position: absolute;
    top: 0;
    right: 3px;
    font-size: 12px;
  }

  .weixin-title {
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .weixin-logo-one {
      margin-right: 10px;
      box-sizing: border-box;
      /*border: solid 1px #ccc;*/
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 30px;
      }
    }
    .weixin-logo-two {
      margin-left: 10px;
      box-sizing: border-box;
      /*border: solid 1px #ccc;*/
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 30px;
      }
    }
    .weixin-sousuo {
      width: 80%;
      height: 30px;
      /*background-color: #f3f2f2;*/
      position: relative;
      display: flex;
      align-items: center;

      i {
        font-size: 14px;
        display: inline-block;
        margin-right: 10px;
        margin-left: 10px;
      }
    }
  }

  .block {
    width: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f2f2;
  }

  .padding {
    padding-left: 10px;
  }

  .center {
    justify-content: center;
  }

  .borderOne {
    border-left: solid 1px #ccc;
  }

  .borderTwo {
    border-right: solid 1px #ccc;
  }

  .w {
    width: 65% !important;
  }

  .scroll {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .current {
    /*border-bottom: solid 2px #333;*/
  }

  .fix-class {
    position: fixed;
    top: 95px;
    right: 385px;
    width: 80px;
  }
</style>
